<!--
 * @Author: your name
 * @Date: 2021-06-28 09:16:44
 * @LastEditTime: 2021-06-28 09:48:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cloneStudy\VUEDEMO\04-Vue-if show\01v-if.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    .img{
        width: 750px;
        height: 300px;
    }
</style>
<body>
    <div id="app">
        <div class="con">
            <img v-show="i===activateIndex" v-for="(pic,i) in list" :src="pic">
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    activateIndex:0, // i===activateIndex i是指第几个img 所以当activateIndex为几name就对应第几个img的v-show的true来显示
                    list:[
                        "https://p1.music.126.net/X9oObuw2u0HAimURm91HDg==/109951166124747408.jpg?imageView&quality=89",
                        "https://p1.music.126.net/ZyjpV-MToefd1HKpBxcRtA==/109951166127170984.jpg?imageView&quality=89",
                        "https://p1.music.126.net/UmWr_EMHWCmPHWVuGk2QeA==/109951166127166143.jpg?imageView&quality=89",
                        "https://p1.music.126.net/GftFPDj6EfB0iC1PCP60WQ==/109951166125431554.jpg?imageView&quality=89",
                        "https://p1.music.126.net/WAxiqTRCmANwQ6jha4ia2A==/109951166128433929.jpg?imageView&quality=89"
                    ],
                }
            },
            // 定时器放在mounted 因为此时页面已经渲染完毕
            mounted(){
                setInterval(()=>{
                    // this.activateIndex++;
                    if(++this.activateIndex===this.list.length){
                        this.activateIndex=0;
                    }
                    // ++this.activateIndex===this.list.length?this.activateIndex=0
                // 先++ 判断结果是否等于列表长等于就归零 无else 无冒号
                },2000);
            }

        })
    </script>
</body>

</html>